import type { TableColumnCtx } from 'element-plus'
import { PAGING } from '@/constant'
import { loadRemoteMonitoringList } from '@/api/modules/remoteMonitoring'
import type { RemoteMonitoringParams } from '@/types/modules/api-remoteMonitoring​'

export type ColumnType = { label: string, prop: string }
  & Partial<Omit<TableColumnCtx<any>, 'label' | 'prop'>>

export type ParamsRemoteMonitoringParams =
  Omit<RemoteMonitoringParams, 'cycle' | 'startTime' | 'endTime'>

export function useRemoteRealtimeMonitor() {
  const [loading, setLoading] = useState(false)
  const [columns, setColumns] = useShallowState<ColumnType[]>([])
  const [lists, setLists] = useShallowState<any[]>([])
  const pagination = reactive({
    pageNumber: 1,
    pageSize: PAGING.PAGE_SIZES[0],
    total: 0,
  })

  async function getRealTimeMonitorData(params: ParamsRemoteMonitoringParams) {
    setLoading(true)
    try {
      const { data } = await loadRemoteMonitoringList(params)
      setColumns(data.thead as any)
      setLists(data.tbody as any)
      pagination.total = data.total
    }
    catch (e) {
      console.warn(e)
    }
    finally {
      setLoading(false)
    }
  }

  return {
    columns,
    lists,
    setLists,
    loading,
    pagination,
    getRealTimeMonitorData,
  }
}
